<template>
	<div class="content">
    <h1>客户360</h1>
    <div class="userinfo">
      <div class="user-right">
        <el-row justify="center">
          <el-col :span="24" class="tagDiv">
            <img class="img" src="/@/assets/img/userIcon.jpeg" alt="">
          </el-col>
          <el-col :span="24" class="tagDiv">
            <!-- <el-tag>砖石客户</el-tag> -->
            <img class="tagImg" src="/@/assets/img/zskh.png" alt="">
          </el-col>
        </el-row>
        <div class="infoTips">
          <h1 style="font-size: 30px;">唐思琪 <el-button class="btn" type="warning" round> + 关注</el-button></h1>
          <el-row class="tipsRow">
            <el-col :span="4" class="iconTips"><el-image class="iconImg" src="/@/assets/img/women.png" :fit="fit" />女</el-col>
            <el-col :span="4" class="iconTips"><el-image class="iconImg" src="/@/assets/img/age.png" :fit="fit" />26</el-col>
            <el-col :span="16" class="iconTips"><el-image class="iconImg" src="/@/assets/img/phone.png" :fit="fit" />13756322345</el-col>
          </el-row>
          <el-row class="tipsRow">
            <el-col>
              <span class="tipsLabel">客户生命周期:</span>
              <el-tag>有效</el-tag>
            </el-col>
          </el-row>
          <el-row class="tipsRow">
            <el-col>
              <span class="tipsLabel">唯一归属机构:</span>
              <span>望江支行营业部</span>
            </el-col>
          </el-row>
          <el-row class="tipsRow">
            <el-col :span="6" class="iconTips"><el-image class="iconImg" src="/@/assets/img/douzi.png" :fit="fit" />金豆数: <span>374.8</span> </el-col>
            <el-col :span="6" class="iconTips"><el-image class="iconImg" src="/@/assets/img/jifen.png" :fit="fit" />积点数:<span>374.8</span></el-col>
            <el-col :span="12" class="iconTips"><el-image class="iconImg" src="/@/assets/img/gongxian.png" :fit="fit" />客户贡献度:<span>374.8</span> <el-icon class="iconZoom" @click="zoomClick"><ZoomIn /></el-icon></el-col>
          </el-row>
        </div>
      </div>
      <div class="user-left">
        <el-row>
          <el-button type="primary" plain>绩效详情</el-button>
          <el-button type="primary" plain>主管户申领</el-button>
          <el-button type="primary">绩效申领</el-button>
        </el-row>
        <el-row>
          <el-col :span="8" class="imgBtn">
            <img  src="/@/assets/img/zcd.png" alt="">
            <span>忠诚度</span>
          </el-col>
          <el-col :span="8" class="imgBtn">
            <img  src="/@/assets/img/khwh.png" alt="">
            <span>客户维护</span>
          </el-col>
          <el-col :span="8" class="imgBtn">
            <img  src="/@/assets/img/KFC.png" alt="">
            <span>KYC地图</span>
          </el-col>
        </el-row>
      </div>
    </div>
    <contributionDetailModal ref="detailModal"></contributionDetailModal>
  </div>
</template>

<script setup lang="ts">
  // 引入组件
  const contributionDetailModal = defineAsyncComponent(() => import('./child/contributionDetailModal.vue'));
  const detailModal = ref(null)
  const zoomClick = () => {
    detailModal.value.show();
  }
</script>
<!-- lang="sass" -->
<style scoped lang="scss">
  h1{
    font-weight: bold;
    font-size: 18px;
  }
  .userinfo{
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    height: 204px;
    padding: 10px;
    background-image: linear-gradient(180deg, #DAE3FB 7%, #FFFFFF 64%, #FFFFFF 100%);
    border-radius: 4px;
  }
  .user-right{
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .user-left{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .img{
    width: 120px;
    height: 120px;
    border-radius: 50%;
  }
  .tagDiv{
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .btn{
    height: 20px;
  }
  .iconTips{
    font-size: 14px;
    color: #898FA0;
    display: flex;
    flex-direction: row;
    align-items: center;
    span{
      color: #495169;
      font-size: 14px;
      margin-left: 5px;
    }
    .iconZoom{
      color: #0263FF;
      margin-left: 5px;
      cursor: pointer;
      font-size: 14px;
    }
  }
  .tipsRow{
    margin: 10px 0 ;
  }
  .tipsLabel{
    color: rgb(145,150,164);
    margin-right: 5px;
  }
  .imgBtn{
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    img{
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    span{
      margin-top: 5px;
      font-size: 14px;
      font-weight: bold;
      color: rgb(117,122,138);
    }
  }
  .tagImg{
    width: 60px;
    height: 20px;
  }
  .infoTips{
    min-width: 30vw;
  }
  .iconImg{
    width: 14px;
    height: 14px;
  }
</style>